<template>
  <div class="login-page center wh-100">
    <Transition
      name="fade"
      mode="out-in"
      enter-active-class="animate__animated animate__bounceInDown"
      leave-active-class="animate__animated animate__backOutDown"
    >
      <component
        @toggleComponet="getActiveComponent"
        :is="activeComponent"
      ></component>
    </Transition>
  </div>
</template>
<script>
import Login from "@/components/Login.vue";
import Register from "@/components/Register.vue";
export default {
  name: "LoginView",
  components: {
    Login,
    Register,
  },
  data() {
    return {
      activeComponent: "Login",
    };
  },
  methods: {
    getActiveComponent(activeComponentName) {
      this.activeComponent = activeComponentName;
    },
  },
};
</script>

<style scoped lang="scss">
div {
  background-color: #ddd;
}
</style>
